Bootstrap Snippet Gsap Image carousel using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
    <!-- =================Slider Star=========================== -->
    
    <div class="slider">
        <div class="inner-container">
            <div class="slider__wrraper flex-column">
                <div class="flex-column slider__content"></div>
                <div class="slider__footer">
                    <div class="slider__btns justify-between">
                        <button class="slider__btn-buy">buy</button>
                        <div class="flex-center">
                            <button
                            data-type="prev"
                            class="slider__btn-switch slider__btn-switch--dark flex-center"
                            ></button>
                            <button
                            data-type="next"
                            class="slider__btn-switch slider__btn-switch--light flex-center"
                            ></button>
                        </div>
                    </div>
                    <div class="slider__index"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- =================Slider End=========================== -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script>
        // Designed by: Hardik Bhandari
// Gitub :- bhandaarihardik/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
html {
  box-sizing: border-box;
  --gutter: 2.5rem;
  --color-primary: #252525;
  --color-secondary: #fff;
  --color-secondary-rgb: 255, 255, 255;
}
html *,
html *::before,
html *::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  color: var(--color-primary);
  font-family: "Lato", sans-serif;
}
button {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent ;
}
.inner-container {
  height: 100%;
  margin: 0 auto;
  max-width: 85rem;
  width: calc(100% - var(--gutter));
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Gsap Image carousel"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Gsap Image carousel" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Gsap Image carousel"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY